<template>
<div class="panel">
    <div class="panel-header">
        <div class="bl"></div>
        <div class="title">跟进记录[{{ visitList.length }}次]</div>
    </div>
    <div class="panel-body">
        <el-table :data="visitList" border>
            <el-table-column label="跟进人" prop="user.realname" align="center" width="120">
                <template slot-scope="scope">
                    <div class="avatar">
                        <span>{{ scope.row.user.realname }}</span>
                        <span v-if="scope.row.user.status == 0">[离职]</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="跟进状态" prop="status_title" align="center" width="100">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.status_color" @click="showVisitEdit(scope.row)">{{ scope.row.status_title }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="跟进时间" prop="create_time" width="140"></el-table-column>
            <el-table-column label="下次跟进" prop="next_visit_time" width="140"></el-table-column>
            <el-table-column label="备注">
                <template slot-scope="scope">
                    <div v-html="scope.row.remark.replace(/\n/g, '<br>')"></div>
                </template>
            </el-table-column>
            <el-table-column label="附件" width="140">
                <template slot-scope="scope">

                    <el-image v-if="scope.row.files.images.length" style="width: 100px; height: 100px" :src="scope.row.files.images[0].url" :preview-src-list="scope.row.files.images | toImages"></el-image>
                    <div class="file-list" v-if="scope.row.files.files.length">
                        <div class="file-item" v-for="(item, key) in scope.row.files.files" :key="key">
                            <a :href="item.url" target="_blank">{{item.name}}</a>
                        </div>
                    </div>

                </template>
            </el-table-column>
        </el-table>
    </div>
    <visit-edit ref="visitEditRef"></visit-edit>
</div>
</template>

<script>
import visitEdit from "./visit-edit.vue";
export default {
    name: "visit-list",
    components: {
        visitEdit,
    },
    props: {
        visitList: {
            type: Array,
            default: [],
        },
    },
    filters: {

        toImages(images) {
            return images.map(item => item.url);
        },
    },
    methods: {
        // 添加回访
        showVisitEdit(row) {
            this.$refs["visitEditRef"].showDrawer(row);
        },
    },
};
</script>

<style lang="scss" scoped>
.avatar {
    cursor: pointer;
}
</style>
